<template>
  <div class="headline">
    <a-input type="text" v-model:value="queryParas" placeholder="关键字" />
    <a-button class="user-btn" type="primary" @click="onQuery"> 查询 </a-button>
    <a-button class="user-btn" type="primary" @click="onAdd"> 添加 </a-button>
  </div>
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template #action="{ record }">
      <span>
        <a-button class="user-btn" type="primary" @click="onSave(record)"> 修改 </a-button>
        <a-button class="user-btn" type="danger" @click="onDelete(record)"> 删除 </a-button>
      </span>
    </template>
  </a-table>
  <a-drawer
    :title="drawerTitle"
    placement="right"
    :visible="visible"
    @close="onClose"
    width="500"
  >
    <a-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      style="margin-top: 20px"
    >
      <a-form-item ref="uniqueName" label="权限名称" name="uniqueName">
        <a-input
          type="text"
          v-model:value="form.uniqueName"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="form.remark" />
      </a-form-item>
      <a-form-item>
        <a-checkbox @change="onChange" v-model:checked="form.enabled">
          启用
        </a-checkbox>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button class="user-btn" type="primary" @click="onSubmit"> 保存 </a-button>
        <a-button class="user-btn" @click="resetForm" v-if="!addFlag">
          重置
        </a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script>
import { securityListAPI } from "../../api/api";
import { message } from "ant-design-vue";
import { stringify } from "querystring";
import { Modal } from "ant-design-vue";
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    width: "10%",
  },
  {
    title: "权限名称",
    dataIndex: "uniqueName",
    width: "20%",
  },

  {
    title: "备注",
    dataIndex: "remark",
    width: "20%",
  },
  {
    title: "启用状态",
    dataIndex: "enabled",
    width: "20%",
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      queryParas: "",
      data: [],
      pagination: {},
      loading: false,
      columns,
      reloadFlag: false, //重新加载列表数据
      addFlag: true, //添加操作
      //modal
      visible: false,
      confirmLoading: false,
      drawerTitle: "",
      //modal form
      labelCol: { span: 4 },
      wrapperCol: { span: 12 },

      other: "",
      form: {
        id: 0,
        uniqueName: "",
        remark: "",
        enabled:false,
      },
      rules: {
        uniqueName: [
          {
            required: true,
            message: "请输入权限名称",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ]
      },
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    onQuery() {
      this.fetch({
        pageSize: this.pagination.pageSize,
        pageIndex: this.pagination.current,
        keyWord: this.queryParas,
      });
    },
    handleTableChange(pagination, filters, sorter) {
      //console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      filters = this.queryParas;
      this.fetch({
        pageSize: pagination.pageSize,
        pageIndex: pagination.current,
        keyWord: filters,
      });
    },
    fetch(params = {}) {
      //console.log("params:", params);
      this.loading = true;
      securityListAPI(params).then((res) => {
        this.loading = false;
        this.data = res.data.data.items;
        this.pagination.current = res.data.data.pageIndex;
        this.pagination.pageSize = res.data.data.pageSize;
        this.pagination.total = res.data.data.totalCount;
      });
      console.log(this.pagination);
    },
    onAdd() {
      this.drawerTitle = "添加权限";
      this.addFlag = true;
      this.showDrawer();
    },
    //Drawer
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.form.id = 0;
      this.form.uniqueName = "";
      this.form.remark = "";
      this.form.enabled = false;
      if (this.reloadFlag) {
        this.reloadFlag = false;
        this.onQuery();
      }
    },
    onSave(record) {
      this.form.id = record.id;
      this.form.uniqueName = record.uniqueName;
      this.form.remark = record.remark;
      this.form.enabled = record.enabled;
      this.drawerTitle = "修改权限";
      this.addFlag = false;
      this.showDrawer();
    },
    onDelete(record) {
      let _this = this;
      Modal.confirm({
        title: "您确认删除吗?",
        content: "数据删除后将无法恢复",
        okText: "确认",
        cancelText: "取消",
        onOk() {
            message.warning("接口尚未开通！");
        //   roleDeleteByIdAPI(record.id).then((res) => {
        //     if (res.data.succeeded) {
        //       message.success("删除成功！");
        //       _this.onQuery();
        //     } else {
        //       message.error(res.data.errors);
        //     }
        //   });
        },
        onCancel() {},
      });
    },
    //Drawer form
    onSubmit() {
      this.$refs.ruleForm
        .validate()
        .then(() => {
          var model = JSON.parse(JSON.stringify(this.form));
          if (this.addFlag) {
            message.warning("接口尚未开通！");
            //添加
            // Reflect.deleteProperty(model, "id");
            // roleAddAPI(model).then((res) => {
            //   if (res.data.succeeded) {
            //     this.reloadFlag = true;
            //     message.success("保存成功！");
            //   } else {
            //     message.error(res.data.errors);
            //   }
            // });
          } else {
              message.warning("接口尚未开通！");
            //修改
            // var roleid = model.id;
            // Reflect.deleteProperty(model, "id");
            // roleModifyByIdAPI(roleid, model).then((res) => {
            //   if (res.data.succeeded) {
            //     this.reloadFlag = true;
            //     message.success("保存成功！");
            //   } else {
            //     message.error(res.data.errors);
            //   }
            // });
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style lang="scss">
.headline {
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.headline input {
  width: 200px;
  margin-right: 10px;
}
.headline button {
  margin-right: 10px;
}
.user-btn {
  margin: 5px;
}
</style>